<template>
  <div>
    <Header :title="'返回'" :subTitle="'服务单列表'" :hasBackPath="true" @headerBack="headerBack" v-if="blank != 'blank'"></Header>
    <a-card :bordered="false">
      <div class="top">
        <h2>订单状态：{{ boxDetail.status | filterStatus(statusList) }}</h2>
        <div class="btn-box">
          <a-button style="" @click="showLogistics" v-if="filterAction('物流', boxDetail.status)">物流</a-button>
          <template v-if="boxDetail.isSales == 0">
            <a-button style="" @click="toPrint">打印</a-button>
            <a-button style="" @click="showDelete" v-if="filterAction('删款', boxDetail.status)">删款</a-button>
            <a-button style="" @click="showReplenish" v-if="filterAction('补货', boxDetail.status)">补货</a-button>
            <a-button style="" @click="showPay" type="primary" ghost v-if="filterAction('结算', boxDetail.status)">结算</a-button>
            <a-button style="" @click="showReturn" v-if="filterAction('还货', boxDetail.status)">还货</a-button>
            <a-button @click="showStill" v-if="filterAction('还货记录', boxDetail.status)">还货记录</a-button>

            <a-button style="" @click="showAbnormal" v-if="filterAction('异常处理', boxDetail.status) && boxDetail.isWarn == 1">异常处理</a-button>
            <a-button @click="showSpecifySettle" v-if="goodsCount.buyCount == 0">指定结算</a-button>
            <a-button style="" v-if="filterAction('重制', boxDetail.status)" @click="reMake">重制</a-button>
            <!-- <a-button style="" @click="showCancel" v-if="filterAction('取消', boxDetail.status)">取消</a-button> -->
          </template>

          <a-button style="" type="danger" ghost @click="showTestDeliver" v-if="filterAction('测试发货', boxDetail.status)" v-has="'test:detail-send'">测试发货</a-button>
          <a-button style="" type="danger" ghost @click="showTestSign" v-if="filterAction('测试签收', boxDetail.status)" v-has="'test:detail-sign'">测试签收</a-button>
          <a-button style="" type="danger" ghost @click="showTestDone" v-if="filterAction('测试完成', boxDetail.status)" v-has="'test:detail-finish'">测试完成</a-button>
          <a-button style="" @click="showLogbook">日志</a-button>
          <a-button style="" @click="showReplenishRecordModal" v-if="boxDetail.isSales == 0">补货记录</a-button>
          <a-button style="" @click="showReview">评价详情</a-button>
        </div>
      </div>
      <a-divider style="margin-bottom: 32px" />
      <detail-list title=" 基础信息" :col="3">
        <detail-list-item term="服务单号">{{ boxDetail.boxSn }}</detail-list-item>
        <detail-list-item term="创建时间">{{ boxDetail.createTime }}</detail-list-item>
        <detail-list-item term="服务单来源">{{ boxDetail.placleOrder | placleOrder }}</detail-list-item>
        <detail-list-item term="导购/搭配师">{{ boxDetail.fashionerName }}</detail-list-item>
        <detail-list-item term="完成/取消时间">{{ boxDetail.completeOrCancelTime ? boxDetail.completeOrCancelTime : '-' }}</detail-list-item>
        <detail-list-item term="取消原因">{{ boxDetail.cancelReason ? boxDetail.cancelReason : '-' }}</detail-list-item>
        <detail-list-item term="会员昵称">{{ boxDetail.nickName ? boxDetail.nickName : '-' }}</detail-list-item>
        <detail-list-item term="会员手机号">
          <router-link :to="`/box/customer/info/personal/${boxDetail.unionid}`">{{ boxDetail.mobile }}</router-link>
        </detail-list-item>
        <detail-list-item term="未购买原因">{{ noPayReason(boxDetail.noPayReason, nopayReasonList) }}<a @click="showNotPurchased" style="margin-left: 8px">编辑</a></detail-list-item>
        <detail-list-item term="商场卡折扣">
          {{ boxDetail.shopDiscount ? boxDetail.shopDiscount : 1 }}
          <a @click="showDiscount" style="margin-left: 8px">编辑</a>
        </detail-list-item>
        <detail-list-item term="指定结算">
          {{ boxDetail.explicitBrand != null ? boxDetail.explicitBrand : '-' }}
        </detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px" />
      <detail-list title="会员需求" :col="2">
        <!-- <detail-list-item term="请求工单">{{ customerAsk.boxSn ? customerAsk.boxSn : '-' }}</detail-list-item> -->
        <detail-list-item term="联系方式">{{ customerAsk.contactType | contactType }}{{ contactNum(customerAsk) }}</detail-list-item>
        <detail-list-item term="留言">{{ customerAsk.msg ? customerAsk.msg : '-' }}</detail-list-item>
        <detail-list-item term="会员需求">
          <a-tag v-if="customerAsk.height != null">{{ customerAsk.height }}CM</a-tag>
          <a-tag v-if="customerAsk.weight != null">{{ customerAsk.weight }}KG</a-tag>
          <a-tag v-if="customerAsk.cusGender != null">{{ customerAsk.cusGender | cusGender }}</a-tag>
          <a-tag v-if="customerAsk.goodsTag">{{ customerAsk.goodsTag }}</a-tag>
          <a-tag v-if="customerAsk.sceneTag"> {{ customerAsk.sceneTag }}</a-tag>
          <span v-if="customerAsk.height == null && customerAsk.weight == null && customerAsk.cusGender == null && customerAsk.goodsTag == null && customerAsk.sceneTag == null">-</span>
        </detail-list-item>
        <detail-list-item term="参考图"><img :src="customerAsk.imgs" alt="" v-if="customerAsk.imgs" style="width: 80px" /><span v-else>-</span></detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px" />
      <detail-list title="地址信息" :col="1">
        <detail-list-item term="客户地址">
          {{ boxDetail.name }}<a-divider type="vertical" />{{ boxDetail.phone }}<a-divider type="vertical" />{{ boxDetail.province }} {{ boxDetail.city }} {{ boxDetail.district }}
          {{ boxDetail.address }}
        </detail-list-item>
        <detail-list-item term="还货地址">
          <template v-if="sysStore"
            >{{ sysStore.contact }} <a-divider type="vertical" />{{ sysStore.tel }}<a-divider type="vertical" />{{ sysStore.province }} {{ sysStore.city }} {{ sysStore.district }}
            {{ sysStore.address }}
          </template>
          <template v-else>【暂无换货地址】</template>
        </detail-list-item>
      </detail-list>
    </a-card>
    <a-card :bordered="false" style="margin-top: 24px">
      <div class="title">商品信息</div>
      <p class="goods-sum">
        <span>
          商品总数：<span class="red">{{ goodsCount.allCount }}</span>
        </span>
        <span>
          发货总数：<span class="red">{{ goodsCount.sendCount }}</span>
        </span>
        <span>
          购买总数：<span class="red">{{ goodsCount.buyCount }}</span>
        </span>
        <span>
          退还总数：<span class="red">{{ goodsCount.backCount }}</span>
        </span>
        <span>
          成交金额：<span class="red">￥{{ goodsCount.dealPrice }}</span>
        </span>
        <span class="line">
          <a-divider type="vertical" />
        </span>
        <span>
          退款总数：<span class="red">{{ goodsCount.refundCount }}</span>
        </span>
        <span>
          退款金额：<span class="red">￥{{ goodsCount.refundAmount }}</span>
        </span>
      </p>
      <div class="table-title">
        <span>搭盒</span>
      </div>

      <OrderDetailTable :tableData="goodsData" :orderIdList="orderIdList" :loadingPrice="loadingPrice" @openGoodsDetail="openGoodsDetail"></OrderDetailTable>
      <template v-if="goodsSupply && goodsSupply.length > 0">
        <section v-for="item in goodsSupply" :key="item.boxSupply.id">
          <div class="table-title">
            <span>{{ '补货 ' + item.boxSupply.supplySn }} （原因：{{ item.boxSupply.supplyReason | supplyReason(reasonList) }}）</span>
            <span>补货时间：{{ item.boxSupply.createTime }}</span>
          </div>
          <OrderDetailTable :tableData="item.boxDetailsWithBLOBsList" :orderIdList="orderIdList" :loadingPrice="loadingPrice" @openGoodsDetail="openGoodsDetail"></OrderDetailTable>
        </section>
      </template>
      <template v-if="goodsChange && goodsChange.length > 0">
        <div class="table-title">
          <span>换码</span>
        </div>
        <OrderDetailTable :tableData="goodsChange" :orderIdList="orderIdList" :loadingPrice="loadingPrice" @openGoodsDetail="openGoodsDetail"></OrderDetailTable>
      </template>
      <div class="title">搭配方案</div>
      <a-list item-layout="horizontal" :data-source="styleData" style="margin-bottom: 24px" bordered class="style-list">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <span class="name">{{ item.name != '单品' ? 'LOOK ' + (index + 1) : '单品' }}</span>
          <section>
            <div v-for="(imgs, key) in item.stylingDetailForDemand" :key="key" class="goods">
              <img :src="imgs.imgUrl" alt="" />
              <p>{{ imgs.productCode }}</p>
            </div>
          </section>
          <div class="content">{{ item.content }}</div>
        </a-list-item>
      </a-list>
    </a-card>
    <Replenish ref="replenish" @updateTable="updateTable"></Replenish>
    <ReplenishRecordModal ref="replenishRecordModal"></ReplenishRecordModal>
    <ReturnGoodsModal ref="returnGoods" @updateTable="updateTable"></ReturnGoodsModal>
    <DeleteGoodsModal ref="deleteGoods" @updateTable="updateTable"></DeleteGoodsModal>
    <ReturnRecordModal ref="returnRecord"></ReturnRecordModal>
    <CancelModal ref="cancelModal"></CancelModal>
    <LogisticsModal ref="logisticsModal"></LogisticsModal>
    <NotPurchasedModal ref="notPurchasedModal" @updateDetail="updateDetail" :reasonList="nopayReasonList"></NotPurchasedModal>
    <EditDiscountModal ref="editDiscountModal" @updateDetail="updateDetail"></EditDiscountModal>
    <ReviewModal ref="reviewModal"></ReviewModal>
    <LogbookModal ref="logbookModal"></LogbookModal>
    <ForTestModal ref="forTestModal" @updateTable="updateTable"></ForTestModal>
    <GoodInfoModal ref="goodInfoModal"></GoodInfoModal>
    <SpecifySettleModal ref="specifySettleModal" @updateTable="updateDetail"></SpecifySettleModal>
    <StillGood ref="stillGood"></StillGood>
    <PayModal ref="payModal" @updateTable="updateDetail"></PayModal>
  </div>
</template>
<script>
import {
  queryForMainDetail,
  queryForProductDetails,
  queryForCustomerDemand,
  getProductInfo,
  queryOrderIdWithBoxDetailsId,
  boxDetailPriceCondition,
  resetAddCartByBoxId,
  checkUnSignProduct
} from '@/api/box/order'
import { getOrderAction, fetchUserIsBlack } from '@/views/box/util/global'
import DetailList from '@/components/tools/DetailList'
import ABadge from 'ant-design-vue/es/badge/Badge'
import Header from '@/views/box/components/layouts/Header'
import ReplenishRecordModal from './components/replenishRecordModal'
import Replenish from './components/replenishment'
import ReturnGoodsModal from './components/returnGoodsModal'
import StillGood from './components/stillGood'
import DeleteGoodsModal from './components/deleteGoodsModal'
import ReturnRecordModal from './components/returnRecordModal'
import CancelModal from './components/cancelModal'
import LogisticsModal from './components/logisticsModal'
import NotPurchasedModal from './components/notPurchasedModal'
import EditDiscountModal from './components/editDiscountModal'
import ReviewModal from '@/views/box/components/review/reviewModal'
import LogbookModal from './components/logbookModal'
// import ListInfo from '@views/box/components/goodsInfo/listInfo'
import OrderDetailTable from './components/orderDetailTable'
import ForTestModal from './components/forTestModal'
import GoodInfoModal from '@views/box/components/GoodInfoModal'
import SpecifySettleModal from './components/specifySettleModal'
import PayModal from './components/payModal'
import '@/views/box/util/filter'
import { globalMixin } from '@/views/box/util/globalMixin'
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
import { getQueryString } from '@/assets/js/common'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
const DetailListItem = DetailList.Item

export default {
  mixins: [globalMixin],
  components: {
    ABadge,
    DetailList,
    DetailListItem,
    Header,
    Replenish,
    ReplenishRecordModal,
    ReturnGoodsModal,
    DeleteGoodsModal,
    ReturnRecordModal,
    CancelModal,
    LogisticsModal,
    NotPurchasedModal,
    EditDiscountModal,
    ReviewModal,
    LogbookModal,
    OrderDetailTable,
    ForTestModal,
    GoodInfoModal,
    SpecifySettleModal,
    StillGood,
    PayModal
    // ListInfo
  },
  data() {
    return {
      userInfo: Vue.ls.get(USER_INFO),
      goodsData: [],
      goodsChange: [],
      goodsSupply: [],
      styleData: [],
      boxId: '',
      boxDetail: {},
      goodsCount: {
        dealPrice: ''
      },
      sysStore: {},
      customerAsk: {},
      nopayReasonList: [],
      blank: '',
      orderIdList: [],
      loadingPrice: true
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        processing: '进行中',
        success: '完成',
        failed: '失败'
      }
      return statusMap[status]
    },
    filterStatus(v, statusList) {
      if (statusList.length > 0) {
        let result = statusList.filter(e => e.stateValue == v)
        if (result.length > 0) {
          return result[0].stateName
        } else {
          return v
        }
      } else {
        return v
      }
    },
    cusGender(v) {
      if (v == 0) {
        return '女装'
      } else if (v == 1) {
        return '男装'
      }
    },
    contactType(v) {
      if (v == 0) {
        return '不联系'
      } else if (v == 1) {
        return '电话 | '
      } else if (v == 2) {
        return '微信 | '
      } else {
        return '-'
      }
    },
    supplyReason(v, reasonList) {
      if (reasonList.length > 0) {
        let result = reasonList.filter(e => e.key == v)
        if (result.length > 0) {
          return result[0].value
        } else {
          return v
        }
      } else {
        return v
      }
    }
  },
  computed: {
    title() {
      return this.$route.meta.title
    },
    filterAction(name, status) {
      return (name, status) => {
        let result = this.actionList.filter(e => e.name == name)
        if (result[0].action.includes(status)) {
          return true
        } else {
          return false
        }
      }
    },
    contactNum(obj) {
      // console.log(obj)
      return obj => {
        if (obj.contactType != null) {
          if (obj.contactType == 0) {
            return ''
          } else if (obj.contactType == 1) {
            return obj.cennectPhone
          } else if (obj.contactType == 2) {
            return obj.wechatNumber
          }
        }
      }
    },
    noPayReason(v, reasonList) {
      return (v, reasonList) => {
        // console.log(reasonList)
        let result = reasonList.filter(e => e.value == v)
        if (result.length > 0) {
          return result[0].text
        } else {
          return '-'
        }
      }
    }
  },
  created() {
    this.actionList = getOrderAction()
    this.initDictConfig()
  },
  activated() {
    this.resetPage()
    this.blank = getQueryString('blank')
    this.getStatus()
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  },
  methods: {
    async getStatus() {
      this.boxId = this.$route.params.id
      await this.fetchData()
      // await this.fetchProductDetails()
      await this.fetchProductInfo()
      await this.calcPrice()
      await this.fetchCustomerDemad()
      await this.fetchOrderId()
    },
    // 重制
    reMake() {
      let params = {
        page: {
          pageNo: 1,
          pageSize: 10
        },
        requestData: {
          boxId: this.boxId
        },
        user_id: this.userInfo.id
      }
      resetAddCartByBoxId(params).then(res => {
        // console.log(res)
        if (res.code === 0) {
          let information = {
            defLogistic: {
              province: res.data.logistics.province,
              city: res.data.logistics.city,
              district: res.data.logistics.district,
              address: res.data.logistics.address,
              contactName: res.data.logistics.name,
              contactPhone: res.data.logistics.phone,
              id: res.data.logistics.customerLogisticsId
            },
            pocketTelId: res.data.box.pocketTelId, // 布袋ID
            shopDiscount: res.data.box.shopDiscount // 折扣价格
          }

          localStorage.setItem('box_Information', JSON.stringify(information))
          let outNo = 'severstyle'
          this.$router.push(`/box/workbench/fashioner/collocation/${this.boxDetail.unionid}/${outNo}`)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 未购买原因
    initDictConfig() {
      //初始化字典 - 未购买原因
      initDictOptions('no_pay_reason').then(res => {
        if (res.success) {
          // console.log(res)
          this.nopayReasonList = res.result
          // this.sexDictOptions = res.result
        }
      })
    },
    headerBack() {
      this.$router.back()
    },
    fetchData() {
      let params = {
        requestData: {
          boxId: this.boxId
        }
      }
      return queryForMainDetail(params).then(res => {
        if (res.code == 0) {
          this.boxDetail = res.data.box
          this.sysStore = res.data.sfLogisticsEntity
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    fetchProductDetails() {
      let params = {
        requestData: {
          boxId: this.boxId
        }
      }
      return queryForProductDetails(params).then(res => {
        if (res.code == 0) {
          this.goodsData = res.data.orderFaStorage
          this.goodsChange = res.data.boxDetailForChange
          this.goodsSupply = res.data.boxDetailForSupply
          this.goodsCount = res.data.count
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    fetchCustomerDemad() {
      let params = {
        requestData: {
          boxId: this.boxId
        }
      }
      return queryForCustomerDemand(params).then(res => {
        if (res.code == 0) {
          let list = res.data.stylingBaseForOrder
          let styleList = list.filter(e => e.name != '单品')
          let singleList = list.filter(e => e.name == '单品')
          this.styleData = [...styleList, ...singleList]
          this.customerAsk = res.data.boxForCustomerAsk
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    fetchProductInfo() {
      let params = {
        requestData: {
          boxId: this.boxId
        }
      }
      return getProductInfo(params).then(res => {
        if (res.code == 0) {
          this.goodsData = res.data.createBoxList
          this.goodsChange = res.data.changeCodeList
          this.goodsSupply = res.data.supplyRespList
          this.goodsCount = res.data
          this.goodsCount.dealPrice = Math.round(res.data.dealPrice * 100) / 100
        }
      })
    },
    calcPrice() {
      let statusArr = [2, 3, 7, 12]
      let supplyList = []
      for (let item of this.goodsSupply) {
        supplyList = [...supplyList, ...item.boxDetailsWithBLOBsList]
      }
      let allGoodsList = [...this.goodsData, ...this.goodsChange, ...supplyList]
      let list = allGoodsList.filter(e => !statusArr.includes(e.status)).map(a => a.id)

      if (list.length > 0) {
        let params = {
          requestData: {
            boxId: this.boxId,
            detailIdList: list
          }
        }
        return boxDetailPriceCondition(params).then(res => {
          if (res.code == 0) {
            this.getActualPrice(res.data, this.goodsData)
            if (this.goodsChange.length > 0) this.getActualPrice(res.data, this.goodsChange)
            if (supplyList.length > 0) this.getActualPrice(res.data, supplyList)
            this.loadingPrice = false
            return
          } else {
            this.$message.warning(res.msg)
          }
        })
      }
      this.getActualPrice([], this.goodsData)
      if (this.goodsChange.length > 0) this.getActualPrice([], this.goodsChange)
      if (supplyList.length > 0) this.getActualPrice([], supplyList)
      this.loadingPrice = false
      // console.log(this.goodsSupply, this.goodsChange, this.goodsData, supplyList)
    },
    getActualPrice(priceList, goodsList) {
      if (goodsList.length > 0) {
        goodsList.forEach(i => {
          i.priceActual = i.productFavorablePrice
          if (priceList.length > 0) {
            for (let e of priceList) {
              if (e.boxDetailsId == i.id) {
                i.priceActual = e.priceActual
                break
              }
            }
          }
        })
      }
    },
    // 服务单操作
    async showReplenish() {
      let result = await fetchUserIsBlack(this.boxDetail.unionid)
      if (result) {
        this.$message.warning('黑名单用户，无法补货!')
        return
      }
      this.$refs.replenish.show(this.boxId, this.boxDetail.unionid, this.boxDetail)
    },
    showReplenishRecordModal() {
      this.$refs.replenishRecordModal.show(this.boxId)
    },
    async showReturn() {
      let result = await this.checkUnSignProductList(this.boxId)
      if (result) {
        this.$refs.returnGoods.show(this.boxId, this.boxDetail.unionid)
      }
    },
    checkUnSignProductList(id) {
      return checkUnSignProduct(id).then(res => {
        if (res.code == 0) {
          return true
        } else {
          this.$message.warning(res.data)
          return false
        }
      })
    },
    showStill() {
      this.$refs.stillGood.showModel(this.boxId, this.boxDetail.unionid)
    },
    showDelete() {
      this.$refs.deleteGoods.show(this.boxId)
    },
    showAbnormal() {
      this.$refs.returnRecord.show(this.boxId)
    },
    showCancel() {
      this.$refs.cancelModal.show(this.boxId)
    },
    showLogistics() {
      this.$refs.logisticsModal.show(this.boxId)
    },
    showNotPurchased() {
      this.$refs.notPurchasedModal.show(this.boxId, this.boxDetail.noPayReason)
    },
    showDiscount() {
      this.$refs.editDiscountModal.show(this.boxId, this.boxDetail.unionid)
    },
    showReview() {
      this.$refs.reviewModal.show(this.boxId)
    },
    showLogbook() {
      this.$refs.logbookModal.show(this.boxId)
    },
    toPrint() {
      this.$router.push(`/box/print/${this.boxId}`)
    },
    showPay() {
      this.$refs.payModal.show(this.boxId)
    },
    // 测试专用
    showTestDeliver() {
      this.$refs.forTestModal.show('deliver', this.boxId, this.boxDetail.askId)
    },
    showTestSign() {
      this.$refs.forTestModal.show('sign', this.boxId, this.boxDetail.askId)
    },
    showTestDone() {
      this.$refs.forTestModal.show('done', this.boxId, this.boxDetail.askId)
    },
    showSpecifySettle() {
      this.$refs.specifySettleModal.show(this.boxId, this.boxDetail.explicitBrand)
    },
    async updateTable() {
      this.fetchData()
      // this.fetchProductDetails()
      this.loadingPrice = true
      await this.fetchProductInfo()
      await this.calcPrice()
      await this.fetchOrderId()
    },
    updateDetail() {
      this.fetchData()
    },
    fetchOrderId() {
      let params = {
        requestData: {
          boxId: this.boxId
        }
      }
      return queryOrderIdWithBoxDetailsId(params).then(res => {
        if (res.code == 0) {
          this.orderIdList = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 初始化
    resetPage() {
      this.boxId = ''
      this.blank = ''
      this.goodsData = []
      this.goodsChange = []
      this.goodsSupply = []
      this.goodsCount = {}
      this.styleData = []
      this.customerAsk = {}
      this.boxDetail = {}
      this.sysStore = {}
      this.orderIdList = []
      this.loadingPrice = true
    },
    openGoodsDetail(productId, skuId) {
      this.$refs.goodInfoModal.show(productId, skuId)
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  display: flex;
  padding: 16px 0;
  h2 {
    margin-right: 24px;
  }
  .btn-box {
    button {
      margin-right: 12px;
    }
  }
}
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
.goods-sum {
  font-size: 16px;
  line-height: 32px;
}
.red {
  color: #f45555;
  margin-right: 24px;
  font-size: 20px;
}
.special-price {
  font-size: 14px;
  // margin-bottom: 4px;
  margin-right: 0;
}
.has-special {
  text-decoration: line-through;
}
.origin-price,
.special-price {
  margin-bottom: 4px;
}
.table-title {
  display: flex;
  justify-content: space-between;
  line-height: 32px;
  font-size: 16px;
  margin-bottom: 8px;
  padding: 0 4px;
  font-weight: 500;
}
.style-list {
  .ant-list-item {
    display: flex;
    justify-content: flex-start;
    .name {
      font-size: 16px;
      margin-right: 24px;
      width: 80px;
      text-transform: uppercase;
      display: block;
      // flex: 0 0 auto;
    }
    .content {
      font-size: 14px;
      margin-left: 24px;
      flex: 0 1 auto;
    }
    section {
      display: flex;
      justify-content: flex-start;
      width: 40%;
      flex-wrap: wrap;
      .goods {
        min-width: 100px;
        margin-bottom: 24px;
        img {
          min-width: 80px;
          height: 80px;
          object-fit: scale-down;
          border: 1px dashed #cdcdcd;
          margin-right: 12px;
          background: white;
          display: block;
          margin: 0 auto 12px;
        }
        p {
          text-align: center;
          font-size: 14px;
          margin-bottom: 0;
        }
      }
    }
  }
}
.line {
  margin-left: 10px;
  margin-right: 15px;
}
/deep/ .line .ant-divider {
  width: 3px !important;
  background: rgba(0, 0, 0, 0.85) !important ;
}
.line .ant-divider-vertical {
  height: 20px !important;
}
</style>

